<template>
  <div>
    <div>
      <span @click="btn1('/index', 'Index')">首页</span>
      <span @click="btn2('/class', 'Class')">分类</span>
      <span @click="btn3('/orders', 'Orders')">订单</span>
      <span @click="btn4('/my', 'My')">我的</span>
    </div>
    <div>
      <!-- 路由的出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list1:['首页新闻','首页活动'],
      list2:['喜剧分类','动漫分类'],
      list3:['拼团通知','购物车查看'],
      list4:['个人积分','团购积分'],
    }
  },
  methods:{
    btn1(targetPath,targetName){
      this.$router.push({
        path: targetPath,
        name: targetName,
        params:{
          list:this.list1
        }
      })
    },
    btn2(targetPath,targetName){
      this.$router.push({
        path: targetPath,
        name: targetName,
        params:{
          list:this.list2
        }
      })
    },
    btn3(targetPath,targetName){
      this.$router.push({
        path: targetPath,
        name: targetName,
        params:{
          list:this.list3
        }
      })
    },
    btn4(targetPath,targetName){
      this.$router.push({
        path: targetPath,
        name: targetName,
        params:{
          list:this.list4
        }
      })
    }
  }
}
</script>
<style>
li {
  list-style: none;
}
</style>